<template>
  <div :class="searchVisible?'adv-div1':'adv-div2'" :style="searchVisible?'visablity:visable':'visablity:hidden'">
    <div v-show="showOrHide" class="triangle"></div>
    <div class="advancedSearchSty" v-show="showOrHide" >
      <el-input class="adv_input1" clearable v-model.trim="queryObj.ip" :placeholder="inputHolder[0]"/>
      <el-input class="adv_input2" clearable v-model.trim="queryObj.serviceIp" :placeholder="inputHolder[1]"/>
      <el-select style="width: 150px;" clearable class="adv_select" v-model="queryObj.runState" :placeholder="inputHolder[2]">
      <el-option
          v-for="item in runStates"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
      </el-select>
      <el-button class="adv_but" type="primary" @click="queryEcs(queryObj)">搜索</el-button>
    </div>
  </div>
</template>
<script>
import '../../assets/iconfont/iconfont.css';
import '../../css/style.css';
  export default {
    data () {
      return {
        adv_sty_show:"iconfont icon-xiangxiazhanhang",
        adv_sty_hide:"iconfont icon-xiangshangzhanhang",
        queryObj:{
          "ip":'',
          "serviceIp":'',
          "runState":'',
          "pageNo":'',
          "pageSize":''
        },
        showOrHide:false
      }
    },
    watch:{
      searchVisible(){
        if(this.searchVisible){
          setTimeout(() => {
            this.showOrHide=true;
          }, 100);
        }else{
          setTimeout(() => {
            this.showOrHide=false;
          }, 50);
        }
      }
    },
    props:['searchVisible','runStates','inputHolder'],
    mounted(){
    },
    methods: {
      queryEcs(obj){
        this.$emit('advQuery', obj);
      },
    },
  }
</script>
<style scoped>
.showQuery{
  visibility: visible;
}
.hideQuery{
  visibility: hidden;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.adv-div1{
  height: 100px;
  position: relative;
  z-index: 100;
  transition:height 0.1s linear;
  -webkit-transition:height 0.1s linear;
  -moz-transition:height 0.1s linear;
  -ms-transition:height 0.1s linear;
}
.adv-div2{
  height: 0px;
  position: relative;
  z-index: 100;
  transition:height 0.1s linear;
  -webkit-transition:height 0.1s linear;
  -moz-transition:height 0.1s linear;
  -ms-transition:height 0.1s linear;
}
.advancedSearchSty{
  background-color: #FFFFFF;
  width: 100%;
  height: 100%;
  margin: 10px 0 10px 0;
  box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.08);
}
.triangle{
  width:15px;
  height:15px;
  position: absolute;
  z-index: 99;
  left: 1620px;
  top:-7.5px;
  box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.08);
  transform: rotate(45deg);
  background-color: #FFFFFF;
}
</style>
